<template>
  <div class="index-class" ref="IndexRef">
    <!--    <img :src="require('@/assets/logo.png')" alt="">-->
    <div class="valueflex" ref="valueflexRef">
      <div>
        动态表单: {{formData}}
      </div>
      <div>
        <el-button @click="check">
          校验
        </el-button>
        <el-button @click="reset">重置</el-button>
        <div>当前重置次数：{{resetValueCount}}</div>
      </div>
      <ElInputTest v-model="ElInputTest"></ElInputTest>
    </div>
    <div class="content" ref="contentRef">
      <DynamicForm ref="DynamicFormRef" :scroll-x-to-element="scrollXToElement" v-model="formData" :form-config.sync="formConfig">
        <template #noFormItemNoFormItem="item,data">
          <div>
            外部没有el-form-item的插槽{{item.label}}，使用这个操作可以完全自定义这一块的功能，避免多个进行组合
            {{data}}
          </div>
        </template>
        <template #text7="item,formData">
          <div>
            <el-input ref="text7Ref" v-model="formData[item.prop]" :placeholder="item.label"></el-input>
          </div>
        </template>
        <template #input1-prepend="{item,formData}">
          <span class="test">
            模板插槽{{item.label}}
          </span>
        </template>
        <template #cascader1-default="{item,props,formData}">
          <span class="test">
            模板插槽{{item.label}}{{props.data}}
          </span>
        </template>
        <template #selectObject1-rightSlot="{item,props,formData}">
          <!-- <span class="test">
            模板插槽{{formData}}
          </span> -->
          <div v-for="(item, index) in formData.selectObject1" :key="index" style="display: flex; justify-content: space-between;margin: 30px 0;">
            <span>{{item['666']}}</span>
            <span style="color: red;" @click="handleDelete(formData.selectObject1, index)">删除</span>
          </div>
          <div></div>
        </template>
        <template #selectObject1-showSlot="{item,props,formData}">
          <button :disabled="props.disabled" @click.stop.prevent="props.showFunc">插槽调用</button>
        </template>
        <template #default="item">
          <el-col>
            555556565
          </el-col>
        </template>
      </DynamicForm>
    </div>
  </div>
</template>

<script>
import DynamicForm from '@localModules/ZhiXinLib/element-components/dynamic-form/index.vue';
import { FormConfig } from '@localModules/ZhiXinLib/element-components/dynamic-form/ConfigType';
import typeOfUtils from "@localModules/ZhiXinLib/utils/type-of-utils";

export default {
  name: 'DynamicFormIndex',
  // 定义用到的组件
  components: {
    DynamicForm,
    ElInputTest: () => import('element-ui').then((res) => res.Input),
  },
  // 自定义指令，这里定义局部指令
  directives: {},
  // 过滤器
  filters: {},
  // 定义用到的混入，可以重复使用代码
  mixins: [],
  // 属性定义使用对象的形式进行定义
  props: { indexProps: { type: String, default: 'indexProps' } },
  // 定义变量
  data() {
    return {
      ElInputTest: '',
      assets: 'assets',
      optionsSelect: [],
      predefine: [],
      setColors: [],
      setTexts: [],
      setMarks: {},
      formData: {
        selectObject2:[{ "555": "55510", "666": "44410" }]
      },
      formConfig: null,
      resetValueCount: 0
    };
  },
  // 定义计算属性值，加上watch配合，可以读取vuex异步获取的值
  computed: {
    // indexProps(){
    //   return this.test;
    // },
    // indexProps2: {
    //		get(){
    //			//return this.name.split('').reverse().join('');
    //			return this.firstName+''+this.lastName;
    //		},
    //		set(value){
    //		}
    // }
  },
  // 监听属性值的变化
  watch: {
    // indexProps(val){
    //   console.log(val)
    // },
    // formData: {
    //   handler(value, oldValue) {
    //     this.$message.success('数据变动监听到了')
    //   },
    //   immediate: true,
    //   deep: true
    // }
  },
  // 生命周期钩子函数begin
  // 在页面节点挂载完执行
  mounted() {},
  // 在页面创建完执行
  created() {
    this.setFormConfig()
    console.log(this.formConfig);
    setTimeout(() => {
      this.predefine = ['#ff4500', '#ff8c00', '#ffd700', '#90ee90', '#00ced1'];
      this.optionsSelect = [
        {
          label: '111',
          value: '111',
        },
        {
          label: '222',
          value: '222',
        },
        {
          label: '333',
          value: '333',
        },
      ];
      this.setTexts = ['极差', '失望', '一般', '满意', '惊喜'];
      this.setColors = ['#99A9BF', '#F7BA2A', '#FF9900'];
      this.setMarks = {
        0: '0°C',
        8: '8°C',
        37: '37°C',
        50: {
          style: {
            color: '#1989FA',
          },
          label: this.$createElement('strong', '50%'),
        },
      };
    }, 5000);
  },
  // 生命周期钩子函数end
  // 定义方法
  methods: {
    handleDelete(data, index) {
      data.splice(index, 1);
    },
    reset() {
      this.setFormConfig()
      this.$refs.DynamicFormRef.resetValue()
      this.$nextTick(()=>{
        this.$refs.DynamicFormRef.resetValue()
      })
      // this.$refs.DynamicFormRef.resetValue();
    },
    setFormConfig() {
      this.resetValueCount++
      const common=[
        {
          label: '数据联动1',
          type: 'select',
          prop: '数据联动1',
          props: {
            options: [
              {
                value: '1',
              },
              {
                value: '2',
              },
            ]
          }
        },
        {
          label: '数据联动2',
          type: 'select',
          prop: '数据联动2',
          props:{
            options:[],
            loading: false,
          },
          cascade:{
            watch: true,
            events:[
              {
                watch: false,
                prop: '数据联动1',
                event:(formData,item,prop,value)=>{
                  return new Promise(resolve => {
                    console.log('数据联动测试',formData,item,prop,value)
                    item.props.loading=true
                    setTimeout(()=>{
                      this.$set(item.props,'options',[
                        {
                          value: '1' + value
                        },
                        {
                          value: '2' + value
                        },
                      ])
                      formData[item.prop] = '1' + value
                      resolve()
                      item.props.loading=false
                    },2000)
                  })
                }
              }
            ]
          }
        },
      ]
      const selectObject = [
        {
          span: 24,
          label: '选择对象',
          prop: 'selectObject',
          type: 'selectObject',
          // initValue: [
          //   {
          //     666: '44410',
          //   },
          // ],
          props: {
            selectMultiple: true,
            config: [
              {
                label: '第一列',
                prop: '666',
                search: {
                  type: 'input',
                },
              },
              {
                label: '第二列',
                children: [
                  {
                    label: '第二列-1',
                    prop: '55551',
                    search: {
                      type: 'input',
                    },
                  },
                  {
                    label: '第二列-2',
                    children: [
                      {
                        label: '第二列-2-1',
                        prop: '55552-1',
                        search: {
                          type: 'inputNumber',
                        },
                      },
                      {
                        label: '第二列-2-2',
                        prop: '55552-2',
                        search: {
                          type: 'input',
                        },
                      },
                    ],
                  },
                ],
              },
              {
                span: 12,
                label: '第三列',
                prop: '3333',
                search: {
                  type: 'inputNumber',
                },
              },
              {
                span: 12,
                label: '超长文字9999999999',
                prop: '99',
                minWidth: '500px',
                search: {
                  labelWidth: '200px',
                  type: 'inputNumber',
                },
              },
            ],
            selectShowView: (item) => {
              return item['666'];
            },
            selectEquals: (oldItem, newItem) => {
              return oldItem['666'] === newItem['666'];
            },
            asyncSetTableData: (data, page) => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  const value = [];
                  for (
                    let i = page.pageNum * 10;
                    i < page.pageNum * 10 + page.pageSize;
                    i++
                  ) {
                    value.push({
                      666: '444' + i,
                      555: '555' + i,
                    });
                  }
                  resolve({ data: value, total: 60 });
                }, 2000);
              });
            },
          },
          events: {
            confirm: (select) => {
              console.log(select);
            },
          },
        },
        {
          span: 24,
          label: '选择对象1',
          prop: 'selectObject1',
          type: 'selectObject',
          props: {
            selectMultiple: true,
            showType: 'slot',
            config: [
              {
                label: '第一列',
                prop: '666',
                search: {
                  type: 'input',
                },
              },
              {
                label: '第二列',
                children: [
                  {
                    label: '第二列-1',
                    prop: '55551',
                    search: {
                      type: 'input',
                    },
                  },
                  {
                    label: '第二列-2',
                    children: [
                      {
                        label: '第二列-2-1',
                        prop: '55552-1',
                        search: {
                          type: 'inputNumber',
                        },
                      },
                      {
                        label: '第二列-2-2',
                        prop: '55552-2',
                        search: {
                          type: 'input',
                        },
                      },
                    ],
                  },
                ],
              },
              {
                span: 12,
                label: '第三列',
                prop: '3333',
                search: {
                  type: 'inputNumber',
                },
              },
              {
                span: 12,
                label: '超长文字9999999999',
                prop: '99',
                minWidth: '500px',
                search: {
                  labelWidth: '200px',
                  type: 'inputNumber',
                },
              },
            ],
            selectShowView: (item) => {
              return item['666'];
            },
            selectEquals: (oldItem, newItem) => {
              return oldItem['666'] === newItem['666'];
            },
            asyncSetTableData: (data, page) => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  const value = [];
                  for (
                    let i = page.pageNum * 10;
                    i < page.pageNum * 10 + page.pageSize;
                    i++
                  ) {
                    value.push({
                      666: '444' + i,
                      555: '555' + i,
                    });
                  }
                  resolve({ data: value, total: 60 });
                }, 100);
              });
            },
          },
          events: {
            confirm: (select) => {
              console.log(select);
            },
          },
        },
        {
          span: 24,
          label: '选择对象2',
          prop: 'selectObject2',
          type: 'selectObject',
          props: {
            layout: 'left-right',
            selectMultiple: true,
            config: [
              {
                label: '第一列',
                prop: '666',
                search: {
                  type: 'input',
                },
              },
              {
                label: '第二列',
                children: [
                  {
                    label: '第二列-1',
                    prop: '55551',
                    search: {
                      type: 'input',
                    },
                  },
                  {
                    label: '第二列-2',
                    children: [
                      {
                        label: '第二列-2-1',
                        prop: '55552-1',
                        search: {
                          type: 'inputNumber',
                        },
                      },
                      {
                        label: '第二列-2-2',
                        prop: '55552-2',
                        search: {
                          type: 'input',
                        },
                      },
                    ],
                  },
                ],
              },
              {
                span: 12,
                label: '第三列',
                prop: '3333',
                search: {
                  type: 'inputNumber',
                },
              },
              {
                span: 12,
                label: '超长文字9999999999',
                prop: '99',
                minWidth: '500px',
                search: {
                  labelWidth: '200px',
                  type: 'inputNumber',
                },
              },
            ],
            selectShowView: (item) => {
              return item['666'];
            },
            selectEquals: (oldItem, newItem) => {
              return oldItem['666'] === newItem['666'];
            },
            asyncSetTableData: (data, page) => {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  const value = [];
                  for (
                    let i = page.pageNum * 10;
                    i < page.pageNum * 10 + page.pageSize;
                    i++
                  ) {
                    value.push({
                      666: '444' + i,
                      555: '555' + i,
                    });
                  }
                  resolve({ data: value, total: 60 });
                }, 100);
              });
            },
          },
          events: {
            confirm: (select) => {
              console.log(select);
            },
          },
        },
      ]
      if(this.resetValueCount %2 === 1){
        this.$set(this,'formConfig',new FormConfig(
          {
            gutter: 24,
            span: 8,
            labelWidth: '200px',
          },
          [
            ...common,
            (formData) => {
              const result = []
              if(typeOfUtils.isNotEmpty(formData.select)){
                result.push({
                  span: 12,
                  label: 'formItemFunc',
                  prop: 'formItemFunc',
                  type: "datePicker",
                  props: {
                    type: 'yearrange',
                    format: 'yyyy',
                    'value-format': 'yyyy',
                  },
                  rules: [{required: true, message: '不能为空'}]
                })
                result.push({
                  span: 12,
                  label: 'formItemFuncSelect',
                  prop: 'formItemFuncSelect',
                  type: "select",
                  initValue: '111',
                  props: {
                    clearable: true,
                    setOptions:()=>this.optionsSelect
                  },
                  rules: [{required: true, message: '不能为空'}]
                })
              } else {
                this.$set(formData,'formItemFuncSelect',undefined)
              }
              return result
            },
            {
              label: '多选框',
              type: 'checkbox',
              prop: 'checkbox',
              span: 12,
              initValue: ['6661'],
              props: {
                // type: 'button',
                options: [
                  {
                    label: '666',
                    value: '6661',
                  },
                  {
                    label: '6662',
                    value: '6662',
                  },
                ],
              },
              events: {
                change: (val, type) => {
                  console.log(val, type);
                },
                optionsChange: (val, type, value) => {
                  console.log(val, type, value, 'optionsChange');
                },
              },
            },
            {
              type:'treeSelect',
              labelWidth: '120px',
              label: 'treeSelect示例',
              prop:'treeSelect',
              props: {
                options:[
                  {
                    value: '1',
                    label: '666',
                    children: [
                      {
                        value:'2',
                        label: '7777'
                      }
                    ]
                  }
                ]
              }
            },
            {
              span: 8,
              type: 'select',
              label: '下拉选',
              prop: 'select',
              initValue: ['111'],
              events: {
                change: (e, val, type, l) => {
                  console.log(e, val, type, l);
                },
                'visible-change': (e) => {
                  console.log(e);
                },
              },
              required: true,
              rules: [
                // 校验
                { required: true, message: '不能为空' },
              ],
              props: {
                props: {
                  label: 'label',
                  value: 'value',
                },
                'allow-create': true,
                filterable: false,
                multiple: true,
                clearable: true,
                'collapse-tags': true,
                disabled: true,
                setOptions: () => this.optionsSelect,
                setDisabled: () => {
                  if (this.formData.input) {
                    return false;
                  }
                  return true;
                },
              },
            },
            {
              rules: [
                // 校验
                { required: true, message: '不能为空' },
              ],
              span: 12,
              type: 'input',
              label: '输入框',
              prop: 'input',
              props: {
                // maxlength: 3,
                // minlength: 1,
                clearable: false,
                disabled: false,
                readonly: false,
                type: 'number',
                min: 20,
              },
              initValue: '1',
              events: {
                change: ($event, e, val) => {
                  console.log($event, e, val);
                },
              },
              typeSlots: (h, item, formData) => ({
                prepend: () => [h('div', { class: ['test'] }, item.label)],
                append: () => [
                  this.$createElement('div', { class: ['test'] }, 'append'),
                ],
              }),
            },
            {
              rules: [
                // 校验
                { required: true, message: '不能为空' },
              ],
              span: 12,
              type: 'input',
              label: '输入框1',
              prop: 'input1',
              props: {
                clearable: false,
                disabled: false,
                readonly: false,
                min: 20,
                title: '显示提示',
              },
              initValue: '1',
              events: {
                change: (val) => {
                  console.log(val);
                },
              },
              typeSlots: (h, item, formData) => ({
                append: () => [
                  this.$createElement('div', { class: ['test'] }, '渲染函数插槽'),
                ],
              }),
            },
            {
              span: 12,
              label: '日期区间',
              prop: '日期区间',
              type: 'datePicker',
              props: {
                type: 'daterange',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              label: '日期时间区间',
              prop: '日期时间区间',
              type: 'datePicker',
              props: {
                type: 'datetimerange',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              label: '季度选择',
              prop: 'index12',
              type: 'datePicker',
              props: {
                type: 'quarter',
                format: 'yyyy年 第Q季度',
                'value-format': 'yyyy年 第Q季度',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 6,
              label: '季度区间选择',
              prop: '隐藏占位测试',
              type: 'slot',
              opacity: true,
            },
            {
              span: 12,
              label: '季度区间选择',
              prop: '隐藏占位测试',
              type: 'slot',
              opacity: true,
            },
            {
              span: 6,
              label: '季度区间选择',
              prop: 'index11',
              type: 'datePicker',
              props: {
                type: 'quarterrange',
                format: 'yyyy年 第Q季度',
                'value-format': 'yyyy年 第Q季度',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              label: '年区间选择',
              prop: 'index9',
              type: 'datePicker',
              props: {
                type: 'yearrange',
                format: 'yyyy',
                'value-format': 'yyyy',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              label: '月区间选择',
              prop: 'index10',
              type: 'datePicker',
              props: {
                // type:'yearrange',
                type: 'monthrange',
                // format: 'yyyy',
                // 'value-format': 'yyyy',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              type: 'datePicker',
              label: '日期选择',
              prop: 'datePicker',
              props: {
                type: 'date',
                format: 'yyyy-MM-dd',
                'value-format': 'yyyy-MM-dd',
                'picker-options': {
                  disabledDate(time) {
                    return time.getTime() > Date.now();
                  },
                  shortcuts: [
                    {
                      text: '今天',
                      onClick(picker) {
                        picker.$emit('pick', new Date());
                      },
                    },
                    {
                      text: '昨天',
                      onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24);
                        picker.$emit('pick', date);
                      },
                    },
                    {
                      text: '一周前',
                      onClick(picker) {
                        const date = new Date();
                        date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', date);
                      },
                    },
                  ],
                },
              },
            },
            {
              span: 12,
              type: 'datePicker',
              label: '日期时间选择',
              prop: '日期时间选择',
              props: {
                type: 'datetime',
              },
            },
            {
              span: 12,
              type: 'cascader',
              label: '级联选择器',
              prop: 'cascader',
              props: {
                options: [
                  {
                    label: '111',
                    value: '111',
                  },
                ],
              },
              typeSlots: (h, item, formData) => ({
                default: (props) => {
                  console.log(props);
                  return [h('div', item.label)];
                },
              }),
            },
            {
              span: 12,
              labelWidth: '0',
              type: 'cascader',
              label: '级联选择器1',
              prop: 'cascader1',
              props: {
                options: [
                  {
                    label: '111',
                    value: '111',
                  },
                ],
              },
            },
            {
              type: 'inputRange',
              label: '输入框范围',
              prop: '输入框范围',
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              type: 'inputRange',
              label: 'clearable输入框范围',
              prop: 'clearable输入框范围',
              props: {
                clearable: true
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              type: 'inputRange',
              label: '输入框范围Number',
              prop: '输入框范围Number',
              props: {
                type: 'number',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              type: 'inputRange',
              label: 'clearable输入框范围Number',
              prop: 'clearable输入框范围Number',
              props: {
                type: 'number',
                clearable: true,
                setDisabled:(formData)=>{
                  if(typeOfUtils.isNotEmpty(formData.输入框范围Number)){
                    return false
                  }
                  return true
                }
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 12,
              type: 'select',
              label: '带分割的下拉选',
              prop: 'text3',
              props: {
                disabled: false,
                props: {
                  label: 'label',
                  value: 'value',
                },
                focusLoadAgain: () => {
                  // 获取焦点重新加载
                  return false;
                },
                asyncSetOptions: (query) => {
                  // 异步获取远程数据，或者远程搜索
                  return new Promise((resolve, reject) => {
                    resolve([
                      {
                        label: '555',
                        value: '5555',
                      },
                      {
                        disabled: true,
                        label: '5556',
                        value: '55556',
                      },
                      {
                        label: '江西',
                        children: [
                          {
                            label: '南昌',
                            value: '南昌',
                          },
                          {
                            disabled: true,
                            label: '上饶',
                            value: '上饶',
                          },
                        ],
                      },
                      {
                        label: '浙江',
                        disabled: true,
                        children: [
                          {
                            label: '杭州',
                            value: '杭州',
                          },
                          {
                            label: '义乌',
                            value: '义乌',
                          },
                        ],
                      },
                    ]);
                  });
                },
              },
              typeSlots: (h, item, formData) => ({
                prefix: () => [
                  // h('div', '头部'),
                ],
              }),
            },
            {
              span: 12,
              type: 'timePicker',
              label: 'time选择',
              prop: 'timePicker',
              initValue: new Date(),
              props: {
                type: 'timePicker',
              },
            },
            {
              span: 12,
              type: 'timePicker',
              label: 'timerange',
              prop: 'timerange',
              props: {
                type: 'timePicker',
                'is-range': true,
              },
            },
            {
              span: 12,
              type: 'timePicker',
              label: 'time选择2',
              prop: 'timeSelect',
              initValue: '08:30',
              props: {
                type: 'timeSelect',
                pickerOptions: {
                  start: '08:30',
                  step: '00:15',
                  end: '18:30',
                },
              },
            },
            {
              span: 12,
              type: 'switch',
              label: '开关',
              prop: 'switch',
              props: {
                'active-color': '#13ce66',
                'inactive-color': '#ff4949',
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
                focus: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'slider',
              label: '滑块',
              prop: 'slider',
              props: {
                range: true,
                setMarks: () => this.setMarks,
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
                input: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'rate',
              label: '评分',
              prop: 'rate',
              props: {
                'show-text': true,
                setTexts: () => this.setTexts,
                setColors: () => this.setColors,
                setDisabled: () => {
                  if (this.formData.input) {
                    return false;
                  }
                  return true;
                },
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'colorPicker',
              label: '颜色选择',
              prop: 'colorPicker',
              props: {
                // predefine: this.predefine,
                setPredefine: () => this.predefine,
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'radio',
              label: '单选',
              prop: 'radio',
              props: {
                border: true,
                props: {
                  label: 'dictLabel',
                  value: 'dictValue',
                },
                options: [
                  {
                    dictLabel: '111',
                    dictValue: '111',
                  },
                  {
                    dictLabel: '222',
                    dictValue: '222',
                  },
                  {
                    dictLabel: '333',
                    dictValue: '333',
                  },
                  {
                    dictLabel: '444',
                    dictValue: '444',
                  },
                ],
              },
              events: {
                change: (e, val) => {
                  console.log(e, val, 'radioChange');
                },
                optionsChange: (val, type) => {
                  console.log(val, type, 'radioOptionsChange');
                },
              },
            },
            {
              span: 24,
              type: 'checkbox',
              label: '多选方法初始化',
              prop: 'checkbox',
              setInitValue: () => {
                return ['1'];
              },
              props: {
                border: true,
                props: {
                  label: 'dictLabel',
                  value: 'dictValue',
                },
                options: [
                  {
                    dictLabel: '111',
                    dictValue: '1',
                  },
                  {
                    dictLabel: '222',
                    dictValue: '2',
                  },
                  {
                    dictLabel: '333',
                    dictValue: '3',
                  },
                  {
                    dictLabel: '444',
                    dictValue: '4',
                  },
                ],
              },
              events: {
                change: (options, val) => {
                  console.log(options, val, 555);
                },
              },
            },
            {
              span: 24,
              type: 'inputNumber',
              label: '你好6',
              prop: 'text6',
            },
            ...selectObject,
            {
              span: 24,
              label: '文本输入框',
              prop: 'inputText',
              type: 'input',
              props: {
                type: 'textarea',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 24,
              label: '全渲染模板',
              prop: 'text7',
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 24,
              label: '全渲染函数',
              prop: '全渲染函数',
              render: (createElement, formItem, formData) => {
                return [
                  this.$createElement(
                    'el-input',
                    {
                      model: {
                        value: formData[formItem.prop],
                        callback: (val) => {
                          this.$set(formData, formItem.prop, val);
                        },
                      },
                    },
                    []
                  ),
                ];
              },
            },
            {
              label: '模板渲染noFormItemSlot',
              prop: 'noFormItem',
              type: 'slot',
            },
            {
              label: '渲染函数渲染noFormItemSlot',
              prop: '渲染函数渲染',
              type: 'slot',
              noFormItem: (createElement, formItem, formData) => {
                return [
                  this.$createElement('div', ['渲染函数渲染' + formItem.label]),
                ];
              },
            },
            {
              type: 'ElInputTest',
              prop: 'ElInputTest',
              label: '额外注册组件',
            },
          ]
        ))
      } else {
        this.$set(this,'formConfig',new FormConfig(
          {
            gutter: 24,
            span: 8,
            labelWidth: '200px',
          },
          [
            ...common,
            {
              span: 12,
              type: 'switch',
              label: '开关',
              prop: 'switch',
              props: {
                'active-color': '#13ce66',
                'inactive-color': '#ff4949',
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
                focus: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'slider',
              label: '滑块',
              prop: 'slider',
              props: {
                range: true,
                setMarks: () => this.setMarks,
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
                input: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'rate',
              label: '评分',
              prop: 'rate',
              props: {
                'show-text': true,
                setTexts: () => this.setTexts,
                setColors: () => this.setColors,
                setDisabled: () => {
                  if (this.formData.input) {
                    return false;
                  }
                  return true;
                },
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'colorPicker',
              label: '颜色选择',
              prop: 'colorPicker',
              props: {
                // predefine: this.predefine,
                setPredefine: () => this.predefine,
              },
              events: {
                change: (val) => {
                  console.log(val);
                },
              },
            },
            {
              span: 24,
              type: 'radio',
              label: '单选',
              prop: 'radio',
              props: {
                border: true,
                props: {
                  label: 'dictLabel',
                  value: 'dictValue',
                },
                options: [
                  {
                    dictLabel: '111',
                    dictValue: '111',
                  },
                  {
                    dictLabel: '222',
                    dictValue: '222',
                  },
                  {
                    dictLabel: '333',
                    dictValue: '333',
                  },
                  {
                    dictLabel: '444',
                    dictValue: '444',
                  },
                ],
              },
              events: {
                change: (e, val) => {
                  console.log(e, val, 'radioChange');
                },
                optionsChange: (val, type) => {
                  console.log(val, type, 'radioOptionsChange');
                },
              },
            },
            {
              span: 24,
              type: 'checkbox',
              label: '多选方法初始化',
              prop: 'checkbox',
              setInitValue: () => {
                return ['1'];
              },
              props: {
                border: true,
                props: {
                  label: 'dictLabel',
                  value: 'dictValue',
                },
                options: [
                  {
                    dictLabel: '111',
                    dictValue: '1',
                  },
                  {
                    dictLabel: '222',
                    dictValue: '2',
                  },
                  {
                    dictLabel: '333',
                    dictValue: '3',
                  },
                  {
                    dictLabel: '444',
                    dictValue: '4',
                  },
                ],
              },
              events: {
                change: (options, val) => {
                  console.log(options, val, 555);
                },
              },
            },
            {
              span: 24,
              type: 'inputNumber',
              label: '你好6',
              prop: 'text6',
            },
            ...selectObject,
            {
              span: 24,
              label: '文本输入框',
              prop: 'inputText',
              type: 'input',
              props: {
                type: 'textarea',
              },
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 24,
              label: '全渲染模板',
              prop: 'text7',
              rules: [{ required: true, message: '不能为空' }],
            },
            {
              span: 24,
              label: '全渲染函数',
              prop: '全渲染函数',
              render: (createElement, formItem, formData) => {
                return [
                  this.$createElement(
                    'el-input',
                    {
                      model: {
                        value: formData[formItem.prop],
                        callback: (val) => {
                          this.$set(formData, formItem.prop, val);
                        },
                      },
                    },
                    []
                  ),
                ];
              },
            },
            {
              label: '模板渲染noFormItemSlot',
              prop: 'noFormItem',
              type: 'slot',
            },
            {
              label: '渲染函数渲染noFormItemSlot',
              prop: '渲染函数渲染',
              type: 'slot',
              noFormItem: (createElement, formItem, formData) => {
                return [
                  this.$createElement('div', ['渲染函数渲染' + formItem.label]),
                ];
              },
            },
            {
              type: 'ElInputTest',
              prop: 'ElInputTest',
              label: '额外注册组件',
            },
          ]
        ))
      }
    },
    check() {
      // this.$refs.DynamicFormRef.validate(document.body).then(()=>{
      //   console.log(document.body.scrollTop,6666);
      // }).catch(()=>{
      //   console.log(document.body.scrollTop,5555);
      // })
      this.$refs.DynamicFormRef.validate(); // 不传入父级元素，自动查找
    },
    scrollXToElement(prop) {
      return this.$refs[prop + 'Ref'].$el;
    },
  },
  updated() {
    const height =
      this.$refs.valueflexRef && this.$refs.valueflexRef.clientHeight;
    if (height) {
      if (this.$refs.contentRef) {
        this.$refs.contentRef.style['margin-bottom'] = height + 'px';
      }
    }
  },
};
</script>
<style scoped lang="scss">
.test {
  color: red;
}
.index-class {
  position: relative;
}
.valueflex {
  position: fixed;
  background-color: black;
  color: white;
  bottom: 0;
  margin-right: 0;
  z-index: 2000;
  word-break: break-all;
}
</style>
